<template>
  <div class="QueryContainer">
    <el-table :data="tableData" border style="width: 100%" stripe>
      <el-table-column fixed type="index" :index="1" align="center">
      </el-table-column>
      <el-table-column
        prop="title"
        label="课题名称"
        min-width="180"
        width="220"
      >
      </el-table-column>
      <el-table-column prop="type" label="题目类型" width="120">
      </el-table-column>
      <el-table-column prop="major" label="所属专业" width="140">
      </el-table-column>
      <el-table-column prop="resource" label="题目来源" width="120">
      </el-table-column>
      <el-table-column prop="apply_major" label="适用专业" width="180">
      </el-table-column>
      <el-table-column prop="place" label="完成地址" width="120">
      </el-table-column>
      <el-table-column prop="repetition" label="是否重复" width="100">
      </el-table-column>

      <el-table-column label="指导教师" width="120" align="center">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>姓名: {{ scope.row.teacher1 }}</p>
            <p>职位: {{ "第一指导教师" }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.teacher1 }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="teacher2" label="第二指导教师" width="120">
      </el-table-column>
      <el-table-column
        label="操作"
        fixed="right"
        align="center"
        min-width="200"
      >
        <template slot-scope="scope">
          <el-button
            type="info"
            size="small"
            icon="el-icon-search"
            @click="check(scope.$index, scope.row)"
            >查看</el-button
          >
          <el-button
            size="small"
            type="primary"
            icon="el-icon-edit"
            @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 对话框部分 -->
    <el-dialog
      title="查看课题"
      :visible.sync="dialogFormVisible"
      class="myDialog"
      center
    >
      <el-form :model="form">
        <el-form-item
          label="课题名称："
          required
          :label-width="formLabelWidth"
          style="width: 75%"
        >
          <el-input
            v-model="form.title"
            disabled
            style="width: 100%"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="题目类型："
          required
          :label-width="formLabelWidth"
          style="width: 75%"
        >
          <el-input v-model="form.type" disabled style="width: 100%"></el-input>
        </el-form-item>
        <el-form-item
          label="所属专业："
          required
          :label-width="formLabelWidth"
          style="width: 75%"
        >
          <el-input
            v-model="form.major"
            disabled
            style="width: 100%"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="题目来源："
          required
          :label-width="formLabelWidth"
          style="width: 75%"
        >
          <el-input
            v-model="form.resource"
            disabled
            style="width: 100%"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="说明"
          :label-width="formLabelWidth"
          style="width: 75%"
        >
          <el-input
            v-model="form.explain"
            disabled
            style="width: 100%"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="适用专业："
          required
          :label-width="formLabelWidth"
          style="width: 75%"
        >
          <el-input
            v-model="form.apply_major"
            disabled
            style="width: 100%"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="完成地点："
          required
          :label-width="formLabelWidth"
          style="width: 75%"
        >
          <el-input
            v-model="form.place"
            disabled
            style="width: 100%"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="是否重复："
          required
          :label-width="formLabelWidth"
          style="width: 75%"
        >
          <el-input
            v-model="form.repetition"
            disabled
            style="width: 100%"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="1.选题背景（题目的意义与价值分析）"
          required
          :label-width="formLabelWidth"
          style="width: 95%"
        >
          <el-input
            type="textarea"
            :rows="8"
            resize="none"
            maxlength="800"
            show-word-limit
            v-model="form.background"
            disabled
            style="width: 100%"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="2.题目的基本要求及主要研究内容简介"
          required
          :label-width="formLabelWidth"
          style="width: 95%"
        >
          <el-input
            type="textarea"
            :rows="8"
            resize="none"
            maxlength="800"
            show-word-limit
            v-model="form.desc"
            disabled
            style="width: 100%"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="3.对学生的知识、技能要求；完成本题目已具备条件，尚需要哪些条件"
          required
          :label-width="formLabelWidth"
          style="width: 95%"
        >
          <el-input
            type="textarea"
            :rows="8"
            resize="none"
            maxlength="800"
            show-word-limit
            v-model="form.require"
            disabled
            style="width: 100%"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { titleAll } from "@/api/api/formApi.js";
export default {
  name: "queryTitle",
  methods: {
    check(index, row) {
      this.dialogFormVisible = true;
      this.form = row;
      console.log(this.form);
    },
    handleEdit(index, row) {
      this.dialogFormVisible = true;
      console.log(index, row);
    },
    cancel() {
      this.dialogFormVisible = false;
    },
    confirm() {
      this.dialogFormVisible = false;
    },
  },
  mounted() {
    let usname = localStorage.getItem("userName");
    titleAll(usname).then((res) => {
      this.tableData = res.dataList;
    });
  },
  data() {
    return {
      dialogFormVisible: false,
      tableData: [],
      form: {},
      formLabelWidth: "140px",
    };
  },
};
</script>

<style scoped>
.QueryContainer {
  background-color: #fff;
  height: 82vh;
  border: 1px solid #e6e6e6;
  border-top: 0px;
  padding: 25px;
}
.myDialog {
  height: 800px;
}
/deep/ .el-input.is-disabled .el-input__inner {
  background-color: #ffffff;
  color: #545454;
}

/deep/ .el-textarea.is-disabled .el-textarea__inner {
  background-color: #ffffff;
  color: #545454;
}
</style>